<template>
  <div class="u-page">
    <!-- 分页 -->
    <!-- 上一页按钮 -->
    <a
      href="javascript:void(0)"
      class="pre disabled"
      @click="changePageNum(-1, $event)"
      ref="preRef"
      >上一页</a
    >
    <!-- 页码按钮 -->
    <!-- 第一页 -->
    <a
      href="javascript:void(0)"
      class="page"
      data-index="1"
      :class="currentNum == 1 ? 'current' : ''"
      @click="changePageNum(0, $event)"
      >1</a
    >
    <span class="elis" v-if="currentNum > 5">...</span>
    <!-- 中间页 -->
    <span v-if="Math.ceil(this.total / this.pageSize) > 2">
      <a
        href="javascript:void(0)"
        class="page"
        v-for="i in Math.ceil(this.total / this.pageSize) > 7
          ? 7
          : Math.ceil(this.total / this.pageSize) - 2"
        :key="i"
        :data-index="pageNum(i)"
        :class="currentNum == pageNum(i) ? 'current' : ''"
        @click="changePageNum(0, $event)"
        >{{ pageNum(i) }}</a
      ></span
    >
    <span class="elis" v-if="pages > 8 && pages - currentNum >= 5">...</span>
    <!-- 最后页 -->
    <a
      href="javascript:void(0)"
      class="page"
      :data-index="pages"
      :class="currentNum == pages ? 'current' : ''"
      @click="changePageNum(0, $event)"
      v-if="pages && pages !== 8 && pages !== 1"
      >{{ pages }}</a
    >
    <!-- 下一页 -->
    <a href="javascript:void(0)" class="nxt" @click="changePageNum(1, $event)" ref="nxtRef"
      >下一页</a
    >
  </div>
</template>

<script>
export default {
  // total总数据条数 current当前页码父组件传值 pagesize每页数据数量
  props: ['total', 'currentPage', 'pageSize'],
  data() {
    return {
      currentNum: 1
    }
  },
  methods: {
    // 点击按钮，改变当前页
    changePageNum(deta, e) {
      // 判断是否是为点击上一页、下一页按钮
      if (deta) {
        if (
          (deta < 0 && this.currentNum !== 1) ||
          (deta > 0 && this.currentNum !== Math.ceil(this.total / this.pageSize))
        ) {
          // 当前页+-1
          this.currentNum += deta
        } else {
          return false
        }
      } else {
        this.currentNum = e.target.dataset.index - 0
      }
      // 触发当前页码改变监听事件
      this.$emit('currentChange', this.currentNum)
    }
  },
  computed: {
    // 返回页面的总页数
    pages() {
      return Math.ceil(this.total / this.pageSize)
    },
    // 返回按钮显示的页码
    pageNum() {
      return i => {
        return this.currentNum > 5
          ? this.currentNum + 5 > Math.ceil(this.total / this.pageSize)
            ? Math.ceil(this.total / this.pageSize) - 8 + i
            : this.currentNum - 4 + i
          : i + 1
      }
    }
  },
  watch: {
    // 监听改变上一页和下一页样式
    currentNum: {
      handler(val) {
        if (val === 1) {
          this.$refs.preRef.classList.add('disabled')
          this.$refs.nxtRef.classList.remove('disabled')
        } else if (val === Math.ceil(this.total / this.pageSize)) {
          this.$refs.nxtRef.classList.add('disabled')
          this.$refs.preRef.classList.remove('disabled')
        } else {
          this.$refs.preRef.classList.remove('disabled')
          this.$refs.nxtRef.classList.remove('disabled')
        }
      }
    },
    // 将父组件传过来的当前页prop参数赋值给currentNum
    currentPage: {
      handler(val) {
        if (val) {
          this.currentNum = val
        }
      },
      immediate: true
    }
  },
  created() {}
}
</script>

<style lang="less" scoped>
.u-page {
  margin: 20px 0;
  text-align: center;
  a {
    margin: 0 1px 0 2px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 2px;
    vertical-align: middle;
    background: url(~@/assets/images/button.png) no-repeat 0 9999px;
    &:hover {
      text-decoration: none;
    }
  }
  .pre,
  .nxt {
    width: 69px;
    height: 26px;
    line-height: 24px;
    text-align: left;
  }
  .pre {
    width: 71px;
    padding-left: 22px;
    background-position: 0 -560px;
    &:hover {
      background-position: 0 -590px;
    }
    &.disabled {
      background-position: 0 -620px;
      cursor: default;
      color: #cacaca;
    }
  }
  .nxt {
    width: 71px;
    padding-left: 12px;
    background-position: -75px -560px;
    &:hover {
      background-position: -75px -590px;
    }
    &.disabled {
      background-position: -75px -620px;
      cursor: default;
      color: #cacaca;
    }
  }
  .page {
    height: 24px;
    padding: 0 8px;
    background-color: #fff;
    line-height: 22px;
    &.current {
      background-position: 0 -650px;
      border-color: #a2161b;
      color: #fff;
      cursor: default;
      &:hover {
        border: 1px solid #a2161b;
      }
    }
    &:hover {
      border: 1px solid black;
    }
  }
  .elis {
    margin: 0 2px;
  }
}
</style>
